<template>
  <view class="profile-bg">
    <view class="profile-header">
      <image class="profile-avatar" src="../../static/wode.png" />
      <view class="profile-info">
        <text class="profile-name">学途学生</text>
        <text class="profile-phone">绑定手机号</text>
        <button class="profile-btn">账号管理</button>
      </view>
    </view>
    <view class="profile-section">
      <text class="section-title">系统设置</text>
      <view class="setting-list">
        <view class="setting-item">消息通知设置</view>
        <view class="setting-item">隐私设置</view>
        <view class="setting-item edit-info" @tap="showEdit = true">修改个人信息</view>
      </view>
    </view>
    <!-- 修改个人信息弹窗 -->
    <view v-if="showEdit" class="edit-modal">
      <view class="edit-title">修改个人信息</view>
      <view class="edit-row">
        <text>头像</text>
        <button class="edit-avatar-btn">更换头像</button>
      </view>
      <view class="edit-row">
        <text>昵称</text>
        <input class="edit-input" v-model="editName" placeholder="请输入昵称" />
      </view>
      <view class="edit-row">
        <text>手机号</text>
        <input class="edit-input" v-model="editPhone" placeholder="请输入手机号" />
      </view>
      <view class="edit-actions">
        <button class="edit-cancel" @tap="showEdit = false">取消</button>
        <button class="edit-save" @tap="saveEdit">保存</button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
const showEdit = ref(false)
const editName = ref('学途学生')
const editPhone = ref('')
function saveEdit() {
  showEdit.value = false
  uni.showToast({ title: '保存成功', icon: 'success' })
}
</script>

<style scoped>
.profile-bg { background: #eaf6ff; min-height: 100vh; }
.profile-header { display: flex; align-items: center; padding: 40rpx 24rpx 0 24rpx; }
.profile-avatar { width: 100rpx; height: 100rpx; border-radius: 50%; }
.profile-info { margin-left: 24rpx; display: flex; flex-direction: column; }
.profile-name { font-size: 32rpx; font-weight: bold; }
.profile-phone { color: #888; font-size: 24rpx; margin: 8rpx 0; }
.profile-btn { background: #ffb300; color: #fff; border-radius: 16rpx; font-size: 24rpx; padding: 8rpx 24rpx; }
.profile-section { background: #fff; border-radius: 24rpx; margin: 24rpx; padding: 24rpx; }
.section-title { font-size: 28rpx; font-weight: bold; margin-bottom: 16rpx; display: block; }
.setting-list { display: flex; flex-wrap: wrap; gap: 16rpx; }
.setting-item { background: #f0f0f0; border-radius: 16rpx; padding: 16rpx 24rpx; font-size: 24rpx; }
.edit-info { color: #07c160; }
.edit-modal { position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); background: #fff; border-radius: 24rpx; padding: 40rpx 32rpx; z-index: 999; width: 80vw; box-shadow: 0 8rpx 32rpx rgba(0,0,0,0.08); }
.edit-title { font-size: 32rpx; font-weight: bold; margin-bottom: 24rpx; text-align: center; }
.edit-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20rpx; }
.edit-input { flex: 1; border-radius: 16rpx; border: 1rpx solid #eee; padding: 12rpx 16rpx; margin-left: 16rpx; }
.edit-avatar-btn { background: #f0f0f0; color: #333; border-radius: 16rpx; font-size: 24rpx; padding: 8rpx 24rpx; }
.edit-actions { display: flex; justify-content: flex-end; gap: 24rpx; margin-top: 24rpx; }
.edit-cancel { background: #eee; color: #333; border-radius: 16rpx; font-size: 24rpx; padding: 8rpx 32rpx; }
.edit-save { background: #07c160; color: #fff; border-radius: 16rpx; font-size: 24rpx; padding: 8rpx 32rpx; }
.plan-btn-wrap { display: flex; justify-content: center; margin: 48rpx 0; }
.plan-btn { background: #07c160; color: #fff; font-size: 32rpx; border-radius: 32rpx; padding: 24rpx 80rpx; }
</style> 